<template>
  <div class="event-list">
    <div 
      v-for="event in props.events" 
      :key="event.id"
      class="event-item"
      @click="handleClick(event)"
    >
      <div class="event-header">
        <h3 class="title">{{ event.title }}</h3>
        <span class="date">{{ formatDate(event.date) }}</span>
      </div>
      <div class="event-meta">
        <span class="type">
          <b>类型:</b>{{ event.type }}
        </span>
        <span class="platform">
          <b>主要平台:</b>{{ event.platform }}
        </span>
        <div v-if="event.eventstate<0" class="update-icon"></div><span v-if="event.eventstate<0">更新中</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
const props = defineProps({
  events: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['item-click'])

const handleClick = (event) => {
  emit('item-click', event)
}

// 保留原有 formatDate 方法
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}
</script>

<style scoped>
.event-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 16px;
}

.event-item {
  flex: 1 1 calc(20% - 16px); /* 每行4个，每个块宽度为25%，减去间距 */
  padding: 16px;
  border: 3px solid #090909;
  border-radius: 8px;
  transition: box-shadow 0.3s;
}

.event-item:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.title {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.date {
  font-size: 12px;
  color: #999;
}

.event-meta {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}
.type{
  margin-right: 10px;
}
.platform{
  margin-right: 10px;
}

.update-icon{
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 2px;
}
</style>